我使用的是一个在线发现的角度登录示例，我们使用npm start运行它。我的问题是，当我生成一个组件并将其添加到app.modules.js文件中时，该应用程序仅显示带有加载内容的白页，而在左上方则不显示任何内容。这可能是因为我正在使用npm吗？当我将其发布在stackblitz上并添加了侧边栏组件时，它可以工作，但是如果我通过ng生成一个componenet进行组件测试，则将其添加到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)
答案 0 :(得分：0)
安装Angular CLI：
npm install @angular/cli
然后从app目录运行此文件。它应该打开浏览器到localhost：4200
ng serve --open
答案 1 :(得分：0)
npm install --save-dev @angular-devkit/build-angular
这应该解决您的开发套件错误，它是在angular 6中引入的新依赖关系，必须保存为开发依赖项
答案 2 :(得分：0)
因此，以下是重现“本地”堆栈闪电工作的步骤：
1-使用ng new myApp
生成项目
2-通过导出按钮下载stackblitz项目，然后将文件提取到压缩文件夹中。
3-在提取的文件夹中，转到src文件夹，然后在其中单击第二个src文件夹。
4-复制app和main.ts文件，并将它们粘贴到第一个src文件夹中。
5-打开第二个typings.d文件夹中的src文件，然后在其中复制该行。并将此行粘贴到第一个typings.d文件夹中的src文件中。
6-删除第二个src文件夹。
7-用解压缩的文件夹中的文件夹替换项目根目录中的src文件夹。
8-在您的项目根目录中运行以下命令：npm install --save ng-sidebar
9-运行npm start
您现在可以创建所需数量的组件，这些组件仍然可以使用。
答案 3 :(得分：0)
因此，我去了您引用的站点并下载了github项目。
我按照页面上的指示进行操作，并且能够正常运行。
我尝试通过“ ng”添加组件，但无法添加。我不断收到各种有关angular.json无法定位的错误，依此类推。我不确定要如何将组件放入其中，但是似乎与问题有关。 cli无法开箱即用地运行此项目，它似乎需要使用npm。
在浏览了一些资源之后，似乎这是Webpack上的Angular，因此CLI不适用于您。它也不允许您创建组件。