标签: angular6

我正在尝试将Angular Universal项目从Angular v5迁移到v6

我有一个服务,我用它fs来加载服务器端的翻译.一切都适用于Angular v5.

使用Angular v6,当我运行npm run startaka ng serve --proxy-config proxy.conf.json我面临以下错误

./src/providers/core/translate/translate-universal-loader.service.ts中的错误找不到模块:错误:无法解析'/ Users/me/Documents/projects/myproject/src/providers中的'fs' /核心/翻译"

在我的服务中,我声明fs如下:

declare var require: any;
const fs = require('fs');

我也试图宣布它像跟随,但没有帮助

import * as fs from 'fs';

告诉webpack忽略fs我试图在我的webpack.server.config.js成功中添加以下内容

node: {
    fs: 'empty'
}

还尝试了一个webpack插件,但也没有成功

new webpack.IgnorePlugin(/fs/)

但实际上它可能不是配置使用ng serve但我不知道我是否仍然可以用v6弹出配置？

有谁有想法？

UPDATE

如果我声明fs因为any它解决了问题ng serve但不幸的是它在服务器端npm run build:ssr运行后无法运行npm run serve.在服务器端,我将面临以下错误

错误ReferenceError:未定义fs

ps:我的项目遵循https://github.com/angular/universal-starter结构,配置和依赖项

我正在创建一个角度6项目和一个库使用angular 6.在我的库中,我有一个需要的组件,angular cli所以我添加了它ng g lierary @some/libName.

当我尝试使用命令构建库时,@ng-bootstrap/ng-bootstrap它会抛出以下错误.

Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

有没有人解决过它？

在update.angular.io的升级过程中:

使用rxjs-tslint自动更新规则删除已弃用的RxJS 6功能.

对于大多数应用程序,这将意味着运行以下两个命令:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Run Code Online (Sandbox Code Playgroud)

但是,当我按照这些步骤运行时,rxjs-5-to-6-migrate -p src/tsconfig.app.json我收到错误:

rxjs-5-to-6-migrate: command not found

这个命令不起作用有什么原因吗？

我正在寻找帮助/指针/指导来调试/理解派生类的问题,该派生类在Angular 6项目中扩展了库提供的服务.

我试图将现有的Angular 5.x项目转换为angular.jsonAngular 6项目中的新工作区格式.

我现有的项目包括一个Angular应用程序和一个NgModule提供服务和其他功能的独立共享.共享模块将在多个应用程序中使用,结构如下:

project-root/
    library/
    main-app/
    other-app/

在我现有的NG5代码中,共享库npm link作为TS源文件进入主应用程序(尽管CLI团队明确不推荐,但它适用于我的团队的工作流程).

在NG6应用程序中,library是一个内部的库项目angular.json,如此构建,并通过路径定义拉入项目tsconfig.json.工作区是标准的NG6布局:

workspace-root/
    dist/...
    node_modules/...
    projects/
        library/
            src/lib/...
        main-app/
            src/app/...
        other-app/
    ...

在大多数情况下,库中提供的服务按原样使用,但可以在主应用程序(或其他应用程序)中进行扩展,以提供特定于应用程序的功能.这在Angular 5中工作正常,但在Angular 6中,我在控制台中尝试加载页面时出现以下错误(ng serve运行时):

Object prototype may only be an Object or null

警告发生在这里:

export class FooService extends FooBaseService { // ...
--------------------------------^

当引导进程实例化FooService时,FooBaseService以'undefined'形式出现.

根据研究,这个错误通常与循环依赖问题有关,但我不认为这是正在发生的事情.我在构建库时遇到任何circ-dep警告,或构建主应用程序的任何问题.此外,运行madge -c (链接)在任何一个dist/library或中找不到任何circ-deps dist/main-app.

我对如何继续调试此问题感到困惑.有谁更深入地了解Angular 6如何处理模块提供的服务,他们可能能够指出我正确的方向？

我在使用Angular 6时从延迟加载的模块加载组件时遇到问题.

我使用CLI创建了一个库 - ng generate library @org/chat

更新的angular.json文件包括:

"lazyModules": [
   "dist/org/chat"
],

然后通过AppComponent成功加载模块:

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

到目前为止一直很好,模块正在加载.

但是,ChatModule有一个名为ChatPopupComponent的组件,我找不到使用对话框(或通过将其添加到ViewChild容器)来显示它的方法.

要在对话框中打开组件,需要在模块的entryComponents下声明并在AppComponent级别导入:

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

但是当直接导入组件(并从库中导出)时,我得到以下(明显的)错误:' Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'.由于它是一个延迟加载的模块,它显然还没有导入.

当我尝试以下内容时:

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      }); …

我在角度2/4中使用了表单构建器,但现在我在角度6中使用它.我已经看到了这个问题(不能绑定到'formGroup',因为它不是'form'的已知属性)但是它是针对角度2.我对角度4完全相同,但我得到了这个错误.请帮忙:我的代码是:

app.module.ts :(我已导出FormsModule和ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ], …

我最近将角度4升级到6.现在我尝试了下面的命令

ng generate service security/security

但它在"e2e/app"文件夹下创建了服务,而不是在"src/app"下面是我的angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xyz": {
      "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",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/style.scss",
              "src/styles.css"
            ],
            "scripts": [
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [ …

我尝试使用ng new angular-6-boilerplateangular-cli最新版本创建一个新的Angular项目,但我不能再这样做了.我正在使用windows终端来创建我的项目,但是我收到了这个错误.

原理图输入不对Schema进行验证:{"name":"angular-6-boilerplate","version":"6.1.2","newProjectRoot":"projects","skipInstall":false,"linkCli": false,"skipGit":false,"commit":null}错误:

  Data path ".name" should match format "html-selector".

Run Code Online (Sandbox Code Playgroud)

为什么我收到此错误？

我是Angular的新手,这个问题可能非常广泛.但我有兴趣了解有关国家管理使用情况的更多信息.最近我们的一个项目使用NGXS库实现了状态管理.但是,我试图了解它为应用带来的所有优势是什么？

实现非常深入,在高层次上,有一些操作将应用程序数据(由用户设置)和侦听器传递给那些处理请求并根据需要调度到下一步骤的操作.从一般的角度应用来看,这在应用程序使用或性能等方面有何不同.我正处于理解状态管理的初级阶段,所以我觉得我写的代码太多了,可能并不是真正需要的.示例 - 只是为了路由到另一个页面,我必须实现一个状态模式来保存对象并声明一个动作和一个监听器来实现该动作.

我正在阅读几份文件并获得有关如何实施国家管理的详细信息,但没有得到正确解决为什么要实施州管理的答案.

先感谢您!

我在Windows 10上安装了最新的Node and Angular

npm install npm@latest -g 
npm install -g @angular/cli@latest 

但是，当我尝试启动一个项目时ng new new-project，出现以下错误

    npm WARN tarball tarball data for @angular/compiler@^6.1.0 (sha512-TY6axB1c7VvYXf+ebFDq3Ej+edgii3CDxew8HnyTFAWeDF2Gh8io1vTYwtdyDka6U53ASaheM1HpiUjzvYH0jQ==) seems to be corrupted. Trying one more time. 
    npm WARN tar ENOENT: no such file or directory, open 'C:\Users\admin\Desktop\...\node_modules\.staging\@angular\common-6be83a81\locales\si.js'
    ...

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2018-10-08T01_01_48_404Z-debug.log
    Package install failed, see above.

我尝试完全卸载Node.js和Angular CLI，然后再次重新安装

 npm install npm@latest -g 
 npm install -g @angular/cli@latest 

但是还是一样的错误.....所以我用谷歌搜索了这个问题。似乎有些人也有，但是对于某些人来说，它却神奇地消失了。

如何解决这个问题？