标签: angular7

我想压缩构建angular项目时创建的包文件.我ng build --environment=${environment}用来构建当前的应用程序和版本"@angular/compiler-cli": "^4.0.0"不生成.gz文件到dist文件夹.生成.gz包文件的最简单方法是什么(最好不要触摸webpack.config.js文件)？PS:我知道.gz有时创建文件的选项会被angular/cli团队删除.但我绝望地需要它,因为我的捆绑文件非常庞大.

我正在尝试实现通配符模块,我似乎没有得到它的工作:

现在我有以下代码可行:

typings.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
  }
}

您可能会看到一个活生生的例子在这里,但是我想实现通配符,因为看到这里(typescriptlang)和这里(SitePen接触):

实现应该允许我做这样的事情:

typings.d.ts

declare module "*.json!i18n" {
  const value: any;
  export default value;
}

declare module "*.json!static" { …

我正在使用Angular 7并使用observable调用简单服务

import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private http:Http) { }
  registerUser(user):Observable<any>{
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    return this.http.post('http://localhost:8888/users/register', user, {headers:headers});
  }
}

虽然编译代码是好的,但当它命中注册url和组件然后它给出错误

ERROR Error: "[object Object]"
    resolvePromise http://localhost:4200/polyfills.js:3159:31
    resolvePromise http://localhost:4200/polyfills.js:3116:17
    scheduleResolveOrReject http://localhost:4200/polyfills.js:3218:17
    invokeTask http://localhost:4200/polyfills.js:2766:17
    onInvokeTask http://localhost:4200/vendor.js:72221:24
    invokeTask http://localhost:4200/polyfills.js:2765:17
    runTask http://localhost:4200/polyfills.js:2533:28
    drainMicroTaskQueue http://localhost:4200/polyfills.js:2940:25
vendor.js:70671:5
defaultErrorLogger
http://localhost:4200/vendor.js:70671:5
./node_modules/@angular/core/fesm5/core.js/ErrorHandler.prototype.handleError
http://localhost:4200/vendor.js:70719:9
next
http://localhost:4200/vendor.js:72698:111
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<
http://localhost:4200/vendor.js:68245:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub
http://localhost:4200/vendor.js:141501:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next
http://localhost:4200/vendor.js:141439:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next …

我想使用“角度材料日期”选择器，但出现此错误。

未捕获的错误：模块'AppModule'导入了意外的指令'MatFormField'。请添加一个@NgModule批注。

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {MatFormField} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatFormField
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我收到致命错误:CALL_AND_RETRY_LAST分配失败 - Angular 7.1升级后JavaScript堆内存不足.以前的版本6.1工作得非常好.

我在运行ng build --prod命令时仅在Azure DevOps中收到错误.它在当地建造完美.

以下是详细日志.知道我为什么会收到这个错误吗？

2018-11-22T06:40:36.2804965Z ##[section]Starting: npm build
2018-11-22T06:40:36.2809301Z ==============================================================================
2018-11-22T06:40:36.2809365Z Task         : npm
2018-11-22T06:40:36.2809456Z Description  : Install and publish npm packages, or run an npm command. Supports npmjs.com and authenticated registries like Package Management.
2018-11-22T06:40:36.2809496Z Version      : 1.0.27
2018-11-22T06:40:36.2809531Z Author       : Microsoft Corporation
2018-11-22T06:40:36.2809612Z Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613746)
2018-11-22T06:40:36.2809648Z ==============================================================================
2018-11-22T06:40:36.7158800Z SYSTEMVSSCONNECTION exists true
2018-11-22T06:40:36.8019327Z SYSTEMVSSCONNECTION exists true
2018-11-22T06:40:36.8872807Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" --version"
2018-11-22T06:40:37.5174051Z 6.4.1
2018-11-22T06:40:38.9461529Z …

我开发了一个带有后端的angular 7应用程序。Express在Angular上运行，localhost:3000而Angular Client在localhost：4200上运行。

在server.js我有（不是整个代码）

const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

在api.js文件中，我有router.get（'/ oauth2 / login'）重定向到https://example.com，后者发送访问令牌并验证用户身份（OAuth2身份验证）。

当我调用URL http：// localhost：3000 / api / oauth2 / login时，一切正常，但是当我尝试从angular component.ts-> service.ts中执行相同操作时，出现以下错误。

跨域请求被阻止：同源策略禁止读取远程资源原因：CORS标头“ Access-Control-Allow-Origin”丢失

Angular应用程序流程如下login.component.ts，它具有一个调用服务api.service.ts的按钮，该按钮执行http get。

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

api.service.ts

login() {
  console.log('DEBUG: …

我正在订阅来自 Angular 服务的响应：

  books: BookModel[] = [];

  constructor(private bookService: BookService) { }

  ngOnInit() {

    this.books = this.getBooks();

  }

  getBooks(): BookModel[] {

    return this.bookService.getByCategoryId(1).subscribe((payload: Payload<GetBooksResponse>) => {

      return payload.result.map((response: GetBooksResponse) => { 

        return {
          id: response.id, 
          title: response.title
        };

      });

    });

  }

当我添加return到时this.bookService，例如，return this.bookService我收到错误：

Type 'Subscription' is missing the following properties from type 'BookModel[]': length, pop, push, concat, and 26 more.

我如何使用 return 来完成这项工作？

更新：书模型：

export interface BookModel {
  id: number;
  title: string;
}

我最近在使用ng update 和运行时更新了我的angular版本ng lint

我收到错误 create is deprecated: use new Observable() instead

this.data$ = Observable.create(t => {
    t.next(this.model);
    t.complete();
});

new observable的语法是什么？

scrollPositionRestoration ：'top' 不适用于 RouterModule.forchild()？angular 7 中是否有任何解决方案可以确保页面在导航后始终滚动到顶部？

我正在将Angular 7应用程序配置为生产环境，并尝试在不同目录中组织文件。

angular.json

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/samsara-ui",
                        "index": "src/index.html",
                        "main": "src/js/main.ts",
                        "polyfills": "src/js/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css",
                            "src/samsara-theme.scss"
                        ],
                        "scripts": []
                    },

目前，我的目录如下所示：

??? dist
|   ??? <appname>
|   |   ??? assets
|   |   |   ??? icons
|   |   |   ??? images

|   |   |   index.html
|   |   |   *.js (bundled files: runtime.js, polyfills.js, vendor.js, main.js)
|   |   |   *.map
|   |   |   style.css
|   |   |   *.woff, …