标签: angular-cli-v6

更新到Angular 6.0.1后,我收到以下错误ng serve:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
    at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update说一切都井然有序.删除node_modules文件夹和全新npm install安装也没有帮助.

我的项目基于[ng2-admin(Angular4版本)].(https://github.com/akveo/ngx-admin)这是我的package.json dependecies:

 "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "amcharts3": "github:amcharts/amcharts3",
    "ammap3": "github:amcharts/ammap3",
    "angular-table": "^1.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6", …

我想在我的Angular项目中使用Google Maps API,因此我使用这两个命令来安装npm包:

npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev

我将此行添加到我的组件中:

import {} from "@types/googlemaps";

但是我在VS Code中看到了这两个错误:

[ts] File 'h:/Angular Projects/Breakfast/client/breakfast/node_modules/@types/googlemaps/index.d.ts' is not a module.
[ts] Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'.

我添加了这些行

"types": ["googlemaps"]
"moduleResolution": "node"

到tsconfig.json和tsconfig.spec.json,但仍然没有运气.在Chrome开发工具上,我看到以下错误:

Error: Uncaught (in promise): TypeError: Cannot read property 'Autocomplete' of undefined
TypeError: Cannot read property 'Autocomplete' of undefined

角度版本6打字稿版本2.9.2

我也尝试过Angular 5.

我正在转换库(ng-app-state)以使用angular cli,现在v6支持库(yay!).

在一些代码中进行脚手架和复制之后,这是我的第一个问题:

我如何/在哪里添加第三方依赖项？

到package.json,或到projects/ng-app-state/package.json？

这个问题特定于Angular的版本6,而不是更早,因为.angular-cli.json文件已被angular.json文件替换.

我创建了一个新的Angular 6项目,并尝试使用以前的版本来更改其默认端口,但这次是在angular.json中.

  "defaults": {
    "serve": {
      "port": 4220
  },  

但是得到以下错误:

在.angular-cli.json中检测到的架构无效,请更正并重试!

有没有人知道如何使用这个新版本的Angular？

如何设置index.scss并将变量,mixins等的全局样式表导入角度6库？

Angular CLI生成具有根组件和组件scss的lib,但添加或导入到根组件的样式不可用于子组件.默认情况下,封装样式是有道理的,但我找不到任何关于如何设置它的信息或示例.

"styles": [...]可以用于此的angular.json 路径"projectType": "application"似乎"projectType": "library"也不适用.

在此先感谢您的帮助!

更新:我的项目是使用angular cli v6.0.5启动的,遵循本指南:https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

TL; DR指南:

ng new my-app --style=scss
ng generate library my-library --prefix ml

这是angular 6生成的文件结构:

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts …

当我想执行我的测试时,我曾经--single-run激活了选项,但在升级到Angular 6后,它不再被识别.

> ng test --source-map=false --single-run --no-progress --browsers=ChromeNoSandbox

未知选项:' - singleRun'

Angular CLI 6中对于--single-run的等效选项是什么？

我试图在Angular 6中为我的测试关闭源图.我知道源图交换机已被删除,例如ng test --sourcemaps=false.我试过修改我的tsconfig文件:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
  ...
  "sourceMap": false
},

由angular.json test->配置块引用:

"test": {
  ...
  "options": {
    ...
    "tsConfig": "src/tsconfig.spec.json",

源地图仍在生成.

实际上,我的npm版本是5.5.1,而角度cli版本是6.2.1.当我尝试使用命令ng new Project_name创建一个新项目时,它正在创建最新版本的angular(在我的例子中,它创建了Angular版本^ 6.1.0).但我想要Angular4.我的问题是如何创建这个Angualr2/4/5(特定版本而不是最新版本)？ 我不认为更改package.json中的版本值将有助于我的情况,因为旧版本和最新的6版本存在一些差异(如一个文件的名称从angular-cli.json更改为anguar. json,不仅名称,而且内容也发生了变化.)我也在Angular-cli Github网站上提出了同样的问题.点击这里

提前致谢!!强文

我正在尝试使用此页面上显示的Angular架构. 当我尝试在项目根目录的终端中使用以下命令时,生成@ angular/material:material-nav --name name-of-new-nav,我得到以下错误为红色,

收集"@ angular/material"无法解析.错误:无法解析集合"@ angular/material".在NodeModulesEngineHost的NodeModulesEngineHost._resolveCollectionPath(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:88:15). SchematicEngine._createCollectionDescription中的createCollectionDescription(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27) (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40)在SchematicEngine.createCollection(/ Users/jeremypeters/MEGA) /development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43)在Object.getCollection(/ Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/utilities/schematics.js:28:31)GenerateCommand.getOptions(/ Users/jeremypeters/MEGA/development/learning/angul)在GenerateCommand的ar /material-learn/node_modules/@angular/cli/models/schematic-command.js:193:41).(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:38:53)位于/ Users/jeremypeters/MEGA/development的Generator.next() /learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:7:71在新的Promise()

我如何让它工作？

信息:Angular CLI:6.0.8

有两个子问题:

1. 我应该将秘密环境变量放入environment.ts文件中吗？

2. 该process变量垫片已经一去不复返了.如果我使用它,tsc会抛出一个错误:Cannot find name 'process'.

这是我的事:

关于Q1:我不认为在environment.ts文件中放置秘密环境变量是正确的.因为这些文件将推动源代码管理,如GitHub,gitlab,bitbucket.这不安全.所以我认为秘密环境变量应该通过process.env,比如process.env.ACCESS_TOKEN,或者,如果使用docker-compose,应该将秘密环境变量放在.env文件中并将此文件添加到.gitignore文件中.

关于Q2:如果我使用Heroku设置我的环境变量,它取决于process变量.现在,angular6摆脱了垫片process,我如何与Heroku合作？此外,通过.env文件使用docker-compose传递环境变量process也取决于.

如果使用.envdocker-compose文件,则会出现一个新问题:如何将.env文件中的变量传递给angular6 environment.ts文件

更新1:

这是一个案例:

首先,没有后端

我使用GitHub API和另一个开放API,并且有一个名为的环境变量access_token,如果我把它放在environment.ts文件中并将我的前端源代码推送到Github,Github会检测到秘密信息并给我一个警告,他们说:

您不应该在源代码中放置GitHub访问令牌并将其推送到repo,因此他们将撤销我的访问令牌.

所以我想使用process.env.ACCESS_TOKEN,但process变量垫片已经消失Angular6,我该如何解决？我应该将environment.ts文件添加到.gitignore文件还是什么？

更新2

这是另一个案例

继续更新1.现在,我添加docker-compose.yaml并Dockerfile在docker容器中运行我的前端应用程序.

这是工作流程:

1. 将Dockerfile运行npm run build命令和复制./build目录写入容器的nginx …