【发布时间】：2019-01-30 03:47:13
【问题描述】：
我正在使用在线找到的角度登录示例，我们使用 npm start 运行。我的问题是当我生成一个组件并将其添加到 app.modules.js 文件中时，该应用程序不会显示任何内容，只是在左上角加载了一个白页...。这可能是因为我使用的是 npm 吗？当我将它发布到 stackblitz 并添加侧边栏组件时，它可以工作，但是如果我通过 ng generate component test 添加一个组件，并且一旦我将它添加到 app.modules.js 文件中，它就会显示白屏，但一旦删除它就可以工作完全没问题。下面提供了 stackbliz 和原始 github 链接
stackblitz：https://stackblitz.com/edit/angular-ydiywh?file=src%2Fapp%2Fapp.module.ts
当我运行 ng serve --open 时出现以下错误
安装模块后出错
ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs//src/tsconfig.app.json'
Error: ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/src/tsconfig.app.json'
at Object.statSync (fs.js:815:3)
at AngularCompilerPlugin._setupOptions (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:96:16)
at new AngularCompilerPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:61:14)
at _createAotPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:41:12)
at Object.getNonAotConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:47:19)
at BrowserBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/browser/index.js:82:37)
at DevServerBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:111:46)
at MergeMapSubscriber.check_port_1.checkPort.pipe.operators_1.concatMap [as project] (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:38:40)
at MergeMapSubscriber._tryNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
at MergeMapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
at MergeMapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/Subscriber.js:64:18)
at TapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/tap.js:62:26)
at TapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/Subscriber.js:64:18)
at MergeMapSubscriber.notifyNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/operators/mergeMap.js:84:26)
at InnerSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
at InnerSubscriber.Subscriber.next (/Users/xxx/Library/Mobile/node_modules/rxjs/internal/Subscriber.js:64:18)
.angular.cli 文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"new-cli": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets"
],
"styles": [],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "new-cli:build"
},
"configurations": {}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "new-cli:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [],
"exclude": []
}
}
}
},
"new-cli-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application"
}
},
"defaultProject": "new-cli"
}
添加组件和运行 npm start 时 chrome 检查出错
Uncaught Error: Unexpected module 'SidebarModule' declared by the
module 'AppModule'. Please add a @Pipe/@Directive/@Component
annotation. at syntaxError
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:1270)
at eval
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10888)
at Array.forEach (<anonymous>) at
CompileMetadataResolver.getNgModuleMetadata
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10870)
at JitCompiler._loadModules
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24112)
at JitCompiler._compileModuleAndComponents
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24093)
at JitCompiler.compileModuleAsync
(webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24053)
at CompilerImpl.compileModuleAsync
(webpack:///./node_modules/@angular/platform-browser-
dynamic/fesm5/platform-browser-dynamic.js?:158) at
PlatformRef.bootstrapModule
(webpack:///./node_modules/@angular/core/fesm5/core.js?:4649) at eval
(webpack:///./src/main.ts?:6)
【问题讨论】：
-
1) 您在系统中全局使用哪个 cli 版本？ 2）你有没有安装角CDK？
-
@VaibhavKumarGoyal 我添加了角度 cdk，我正在使用角度 6 cli
-
为您的错误 @z123 发布了解决方案
-
这个错误意味着它无法找到路径在
.angular.cli.json中的tsconfig.app.json请检查提到的路径是否正确@z123 -
@VaibhavKumarGoyal 我有一个 .angular.json 文件，它是正确的。我贴出来了
标签： javascript node.js angular npm angular6