Closed eun-choi closed 4 years ago
This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?
You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app
and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.
This might be related to your directory structure so its really important to get an accurate repro to diagnose this.
We have the same issue with newest versions of angular and devkit.
Seems that SCSS styles configured in angular.json are not being included in the bundle properly:
However, src/styles.scss is included.
If we move SCSS references from angular.json to be imported through styles.scss, everything works correctly.
This started to happen after the update this morning to angular 10.1.0 / devkit 0.1001.0.
It wasn't just happening on devices, it was happening in production mode. It is reproduced with ng serve --prod and attaches the log.
polyfills.7b0614071d9e64dd3eff.js:1 Unhandled Promise rejection: Angular JIT compilation failed: '@angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
- Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping. ; Zone: <root> ; Task: Promise.then ; Value: Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
- Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at X (main.d577a404cf692988b691.js:1)
at Function.get (main.d577a404cf692988b691.js:1)
at Fe (main.d577a404cf692988b691.js:1)
at fs (main.d577a404cf692988b691.js:1)
at main.d577a404cf692988b691.js:1
at ds.processProvider (main.d577a404cf692988b691.js:1)
at main.d577a404cf692988b691.js:1
at main.d577a404cf692988b691.js:1
at Array.forEach (<anonymous>)
at ve (main.d577a404cf692988b691.js:1) Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
- Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at X (http://localhost:8100/main.d577a404cf692988b691.js:1:1700902)
at Function.get (http://localhost:8100/main.d577a404cf692988b691.js:1:1753555)
at Fe (http://localhost:8100/main.d577a404cf692988b691.js:1:1706153)
at fs (http://localhost:8100/main.d577a404cf692988b691.js:1:1758368)
at http://localhost:8100/main.d577a404cf692988b691.js:1:1756645
at ds.processProvider (http://localhost:8100/main.d577a404cf692988b691.js:1:1756659)
at http://localhost:8100/main.d577a404cf692988b691.js:1:1756461
at http://localhost:8100/main.d577a404cf692988b691.js:1:1703442
at Array.forEach (<anonymous>)
at ve (http://localhost:8100/main.d577a404cf692988b691.js:1:1703406)
@appimpact, you issue seems different, please file an new issue with a reproduction.
@eun-choi, unfortunately without a reproduction it’s hard to tell what’s happening.
It's the same issue - our interfaces are not black, but are broken after the update as SCSS files are not being loaded.
It may be a similar issue. I'm also using several scss files.
The amount of code in the current app is large, so I will try to create a compact code that can be reproduced.
[Added Info.] I found what is caused by @angular-devkit/build-optimizer There were 2 commits in version rc.0, which was affected and did not run.
These two changes are not in the release notes. When I changed scrub-file.js to next.7 version file, I confirmed that there was no problem.
Those 2 commits are internal refactors which shouldn't effect the applications.
I'll try to go through the refactor again, maybe i can spot something. A reproduction would definitely be helpful here or at least what's the difference in emitted code between the changes it would be hard to tell what's happening. You can run the production build without mangling, which should help diff the bundles easier.
NG_BUILD_DEBUG_OPTIMIZE=1 ng build --prod
@alan-agius4 I will copy the code by function unit in both versions of the scrub-file.js file and check which function causes the problem to me.
The problem occurs in function isTslibHelper() Other functions are works fine with the latest code.
Existing code without problems:
// Check if an identifier is part of the known tslib identifiers.
function identifierIsTslib(id, tslibImports, checker) {
const symbol = checker.getSymbolAtLocation(id);
if (!symbol || !symbol.declarations || !symbol.declarations.length) {
return false;
}
return symbol
.declarations
.some((spec) => tslibImports.indexOf(spec) !== -1);
}
// Check if a function call is a tslib helper.
function isTslibHelper(callExpr, helper, tslibImports, checker) {
let name;
if (ts.isIdentifier(callExpr.expression)) {
name = callExpr.expression.text;
}
else if (ts.isPropertyAccessExpression(callExpr.expression)) {
const left = callExpr.expression.expression;
if (!ts.isIdentifier(left)) {
return false;
}
if (!identifierIsTslib(left, tslibImports, checker)) {
return false;
}
name = callExpr.expression.name.text;
}
else {
return false;
}
// node.text on a name that starts with two underscores will return three instead.
// Unless it's an expression like tslib.__decorate, in which case it's only 2.
return name === `_${helper}` || name === helper;
}
Code causing the problem:
// Check if a function call is a tslib helper.
function isTslibHelper(callExpr, helper, tslibImports, checker) {
var _a;
if (!ts.isIdentifier(callExpr.expression) || callExpr.expression.text !== helper) {
return false;
}
const symbol = checker.getSymbolAtLocation(callExpr.expression);
if (!((_a = symbol === null || symbol === void 0 ? void 0 : symbol.declarations) === null || _a === void 0 ? void 0 : _a.length)) {
return false;
}
for (const name of tslibImports) {
for (const dec of symbol.declarations) {
if (ts.isImportSpecifier(dec) && name.elements.includes(dec)) {
return true;
}
}
}
return false;
}
FYI, typescript@4.0.2 and tslib@2.0.1 version.
The tsconfig.json configuration is as follows:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"target": "es2015",
"module": "es2020",
"moduleResolution": "node",
"lib": ["es2018","dom"],
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"downlevelIteration": true,
"importHelpers": true,
"removeComments": true,
"strict": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"suppressImplicitAnyIndexErrors": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
I think what's is happening here is that one of your libraries was compiled using an older version of TypeScript, where it used namespace imports for tslib.
Can you try to update the scrub-file.js
to the below:
Trying with the changed function still doesn't work.
// Check if a function call is a tslib helper.
function isTslibHelper(callExpr, helper, tslibImports, checker) {
var _a;
let identifier;
if (ts.isPropertyAccessExpression(callExpr.expression)
&& callExpr.expression.name.text === helper
&& ts.isIdentifier(callExpr.expression.expression)) {
// for namespaced imports
identifier = callExpr.expression.expression;
}
else if (ts.isIdentifier(callExpr.expression) && callExpr.expression.text === helper) {
// for named imports
identifier = callExpr.expression;
}
else {
return false;
}
const symbol = checker.getSymbolAtLocation(identifier);
if (!((_a = symbol === null || symbol === void 0 ? void 0 : symbol.declarations) === null || _a === void 0 ? void 0 : _a.length)) {
return false;
}
for (const name of tslibImports) {
for (const dec of symbol.declarations) {
if (ts.isNamedImports(name)) {
if (ts.isImportSpecifier(dec) && name.elements.includes(dec)) {
return true;
}
}
else if (dec === name) {
// Namespace import
return true;
}
}
}
return false;
}
Fortunately, I found libraries with problems. (Of the 50+ libraries I used, only 2 had problems.)
"dependencies": {
"@admob-plus/ionic": "^0.19.8",
"kakao-sdk": "^3.1.0",
},
I created a git page related to this. https://github.com/eun-choi/ng-repro-app
Steps to reproduce: 1) Clone git 2) npm install 3) ng serve --prod 4) A problem occurred (Only a black screen is displayed) 5) Modify scrub-file.js to next.7 version code 6) ng serve --prod 7) Print a sample screen (4 social login buttons)
Thanks for the reproduction. That should help us track down the problem much quicker.
By the way @eun-choi, I noticed you a Rio Ed that you tried to change the function. That alone is not enough you need to overwrite the file.
Anyways, I’ll take at the repro in the next couple of days.
Tested by overwriting the file, it was the same.
HI, I started looking and there are a multiple reasons why using kakao-sdk
is causing the failure.
import { KakaoCordovaSDK } from 'kakao-sdk/ngx';
the AOT version is located at import { KakaoCordovaSDK } from 'kakao-sdk';
(Note: shipping both AOT and JIT is not needed, AOT compiled libraries can work in JIT mode as well.)I will try to land a fix for this soon, however I strongly suggest that you reach out the library author to address the mentioned issues.
@alan-agius4 Okay. I'll share this issue with the developers of the 2 libraries. (kakao-sdk & @admob-plus/ionic)
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
🐞 Bug report
Command (mark with an
x
)Description
Install @angular-devkit/build-angular@0.1001.0 or @angular-devkit/build-angular@0.1001.0-rc.0
After build, only a black screen is displayed on the device and the app cannot be used.
FYI, it works without problem until version @angular-devkit/build-angular@0.1000.8 or @angular-devkit/build-angular@0.1001.0-next.7
🔬 Minimal Reproduction
1) npm install @angular-devkit/build-angular@0.1000.8 or @angular-devkit/build-angular@0.1001.0-next.7 2) ng build --prod 3) run on ios/android device 4) it works fine 5) npm install @angular-devkit/build-angular@0.1001.0 or @angular-devkit/build-angular@0.1001.0-rc.0 6) ng build --prod 7) run on ios/android device 8) only a black screen is displayed on the device and the app cannot be used
🌍 Your Environment