我创建了一个角度为9的webaite，但是我对角度有问题。
在某些路线上我有错误：
ERROR Error: Uncaught (in promise): 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.
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.
但是在某些路线中，我没有此错误。另一个怪异的事情是，在本地它可以正常工作，但在服务器中却无法工作。有什么问题，我该如何解决？
在服务器中，我将放置文件放置在app文件夹中，而在本地计算机中则没有此文件夹。
这里是angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"avastar": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "kt",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/avastar",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.png",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"src/assets/vendors/global/vendors.bundle.js",
"src/assets/js/demo1/scripts.bundle.js"
],
"stylePreprocessorOptions": {
"includePaths": [
"src",
"src/stylings/",
"src/stylings/base/",
"src/stylings/kt-customs/"
]
},
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "avastar:build"
},
"configurations": {
"production": {
"browserTarget": "avastar:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "avastar:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"avastar-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "avastar:serve"
},
"configurations": {
"production": {
"devServerTarget": "avastar:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "avastar"
}
答案 0 :(得分：10)
这实际上是角度9版本的问题。由于angle-cli尚未解决此问题，因此主要有3种不同的解决方法。 （您可以在https://github.com/angular/angular-cli/issues/16873中查看问题），
解决方案1
更新节点模块中的所有依赖项（由于某些依赖项版本不兼容，可能会产生此问题）
在项目终端中运行npm update以更新所有依赖项。
解决方案2
如果上述解决方案无效，请在 angular.json 中添加aot= true，并在 package.json 中添加"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"，然后删除node_modules并打包锁定文件，然后重新安装。（https://github.com/angular/angular/issues/35788#issuecomment-627514285）
解决方案3
如果以上方法均无效，则最好是全局降级角度cli版本。因为这个问题在angular cli版本8和7中并未出现问题。
ng --version
npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli@8.3.8
ng --version
............................................... ................................................... ................................................... .........
更新 （2020年7月30日）
有些人通过 在tsconfig.json文件上禁用常春藤引擎来解决此问题：
"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }
参考：https://github.com/angular/angular/issues/35788#issuecomment-650550297
答案 1 :(得分：4)
如果您像我一样，从这里来到Google。 当我包括一个Angular Material Component而不是app.module.ts中的模块时，出现了我的错误
特别说明：每当您向app.module.ts中添加新的材料模块时，都必须停止（并重新启动）ng serve，否则会出现此错误。
更改此
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
MatDialog, // <====== this is the error
],
对此
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
MatDialogModule, // <====== this is the solution
],
答案 2 :(得分：2)
我讨厌这些答案，但它对我有用，哈。
在我的项目中使用 Angular 11
我删除了 node_modules 文件夹并重新安装了模块，然后在 dev 中重建了我的项目，编译器错误消失了。
答案 3 :(得分：1)
就我而言，将Angular 9升级到10后，我遇到了同样的问题。 在Angular 10中，只需从package.json中删除“ postinstall”：“ ngcc”并 tsconfig.app.json中的“ angularCompilerOptions”：{“ enableIvy”：true}。
也许这可以帮助您。
注意：
在Angular CLI 9中，他们引入了新的编译器Ivy，并设置了Ivy 项目中的编译器，您可以在相应文件中添加波纹管
- “后安装”：package.json中的“ ngcc”
tsconfig.app.json中的- “ angularCompilerOptions”：{“ enableIvy”：true}
- “ aot”：在angular.json中为真
但是在Angular 10中，他们将默认编译器设置为Ivy。所以需要 删除选项1和2
答案 4 :(得分：0)
如果files的{{1}}数组中有没有模块的文件，也可能引发此错误。
tsconfig.app.json中包含非模块会导致JIT和AOT编译器在服务或构建时失败。
之前：
tsconfig之后
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["node"]
},
"files": [
"src/main.ts",
"src/polyfills.ts",
"./src/app/<non-module>.ts", // <-- The culprit
],
"include": ["src/**/*.d.ts"]
}
只需删除罪魁祸首...
答案 5 :(得分：0)
对我来说，此问题是由于模块的声明数组中的声明错误所致。我确实声明了不属于该模块的内容。
declarations: [DropDownModule],
imports: [DropDownModule, CommonModule]
此 DropDownModule 不是模块的一部分。
答案 6 :(得分：0)
当我们没有导入任何特定模块或不正确地导入任何模块时，通常会出现此错误。
我也遇到过同样的错误，当时在 module.ts 文件中导入 BrowserAnimationsModule 对我有用。
首先像这样导入：
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
然后在module.ts文件的imports数组中添加模块：
@NgModule({
declarations: [NavBarComponent],
imports: [
CommonModule,
MatToolbarModule,
MatIconModule,
BrowserAnimationsModule, //<----------
],
exports:[NavBarComponent]
})
答案 7 :(得分：0)
行 "buildOptimizer": true 将从构建结果中排除 @angular/compiler。 "optimization": true 行会以某种方式删除基于 JIT 编译器的动态创建组件的相关代码，我对此不是很清楚。但下面的解决方法可以解决这两个问题。
angular.json
# other lines are ignored
{
"projects": {
"app-web": {
"architect": {
"build": {
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js",
"mergeStrategies": {
"module.rules": "append",
"resolve": "append"
},
"replaceDuplicatePlugins": true
}
}
}
}
}
}
}
webpack.config.js
module.exports = (options) => {
if (options.optimization && options.optimization.minimizer && Array.isArray(options.optimization.minimizer)) {
(options.optimization.minimizer).forEach((plugin) => {
if ((plugin.options || {}).terserOptions) {
const terserOptions = (plugin.options || {}).terserOptions;
terserOptions.compress = {
side_effects: false,
};
}
});
}
return {
// other lines are ignored
...options
}
};
但是，构建结果的大小会增加。
这里有一些参考资料，你可以看看。
答案 8 :(得分：0)
就我而言，我在组件模板中有 {{ typeof someValue }}，我快速编写它来调试其他东西，但结果 typeof 在那里不起作用，而是给出了这个奇怪的错误。< /p>
答案 9 :(得分：0)
我只是停止应用程序，然后使用“ng serve”运行它，奇怪的是它运行了！